<template>
     <van-nav-bar left-arrow @click-left="onClickLeft" />
    <div class="email">
        <h3>输入4位验证码</h3>
        <p>您的验证码已发送到@<span> {{ email }}</span></p>
    </div>
    <div class="form">
        <div class="box">
            <input type="text" maxlength="1" v-model="input_arr[0]" @input="addInputFn">
            <input type="text" maxlength="1" v-model="input_arr[1]" @input="addInputFn">
            <input type="text" maxlength="1" v-model="input_arr[2]" @input="addInputFn">
            <input type="text" maxlength="1" v-model="input_arr[3]" @input="addInputFn">
        </div>
    </div>
    <div class="footer">
        <p>120s后重新发送</p>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter , useRoute } from 'vue-router'
// 导入邮箱登录接口
import { emailLoginFunc } from '../api/index'
import { showToast } from 'vant'

const $router = useRouter()// 创建路由实例对象
const $route = useRoute() // 包括路由信息的对象
const onClickLeft = () => {
    $router.back()
}
// 记录邮箱（响应式对象）
let email: any = ref('')
email.value = $route.query?.email

// 数组： 有序的数据集合  0,1,2,3
let input_arr = ref([])


// 延迟变量
let d ;

// 编写监听输入框的值变化的事件
const addInputFn = async ()=> {
    // console.log('test',input_arr.value.length)
    let arr = [... input_arr.value];
    // console.log(arr);
    // 判断输入的验证长度是否符合条件
    if(arr.length == 4){
        // 记录用户输入的验证码
        let code = arr.join("");
        console.log({code})
        // 调用匹配验证码的接口
        await emailLoginFunc({email: email.value, code: code})
        .then(
            (content: any)=>{
                console.log('1.0',content)
                if(content.code == 200){
                    // 缓存token在本地
                    localStorage.setItem("auto_token", content.token);
                    localStorage.setItem("user_nick_name", content.user_nick_name);

                    // 跳转首页
                    d = setTimeout(()=>{
                        $router.push({
                            path: '/home'
                        })
                    },300)
                }
                else {
                    code = '';
                    arr = [];
                    input_arr.value = [];
                }
                // 弹窗提示
                showToast({
                    message: content.msg 
                })
                
            },
            err=>{
                console.log('2.0',err);
            }
        )
    }
}

// 监听器
// watch(input_arr,(nVal, oVal)=>{
//     console.log('test')
//     console.log(nVal)
// })






</script>

<style lang="less">
@import '@/static/less/common.less';
.email {
    h3 {
        font-weight: normal;
        font-size: 22px;
        text-align: center;
        padding-top: 1.0667rem;
        padding-bottom: .8rem;
    }
    p {
        text-align: center;
        font-size: 15px;
        span {
            color: #f00;
        }
    }
}
.form {
    padding: @pad;
    width: 100%;
    box-sizing: border-box;
}
.box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1.3333rem;
    input {
        width: 1.6rem;
        height: 1.0667rem;
        text-align: center;
        line-height:   1.0667rem;
        border: 0;
        font-size: 20px;
        border-bottom: 2px solid #ccc;
        margin: 0 .1333rem;
        color: #333;
        padding: 0;
    }
}


.footer {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
    left: 0;
    padding-bottom: .8rem;
    color: #666;
}
</style>